<template>
  <div class="common-layout ">
    <el-drawer :title="state.detail.title" direction="rtl"
               v-model="state.detail.visible"
               :show-close="true"
               :before-close="cancelClick"
               size="90%">
      <el-tabs :tab-position="tabPosition"
               v-model="activeName"
               class="demo-tabs"
               @tab-change="handleClick">
        <el-tab-pane label="项目预览" name="projectInfo">
          <el-card style="margin: 3px 20px;">
            <el-descriptions :column="6">
              <el-descriptions-item label="项目编号">
                {{form.id}}
              </el-descriptions-item>
              <el-descriptions-item label="创建人">
                {{form.createByName}}
              </el-descriptions-item>
              <el-descriptions-item label="负责人">
                {{form.directorUidName}}
              </el-descriptions-item>
              <el-descriptions-item label="完成周期">
                {{form.startTime}}至{{form.endTime}}
              </el-descriptions-item>
              <el-descriptions-item label="项目状态">
                {{form.statusName}}
              </el-descriptions-item>
              <el-descriptions-item label="关联产品">
                {{form.productName}}
              </el-descriptions-item>
              <el-descriptions-item label="项目成员" :span="6">
                {{form.productName}}
              </el-descriptions-item>
              <el-descriptions-item label="项目描述" :span="6">
                {{form.content}}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-card style="border: none;margin: 3px 20px;">
            <el-tabs v-model="activeInfo"
                     class="demo-tabs"
                     @tab-click="handleProjectClick">
              <el-tab-pane label="项目阶段" name="projectStep">
                <el-card>
                  <el-descriptions :column="1">
                    <el-descriptions-item>
                      <el-steps  class="mb-4" style="width:100%"
                                 finish-status="success"
                                 :active="2"
                                 process-status="finish" simple>
                        <el-step v-for="(step, index) in form.manageStepList"
                                 :key="index"
                                 :title="step.flowName"/>
                      </el-steps>
                      <el-divider />
                      <el-descriptions :column="5">
                        <el-descriptions-item label="当前阶段">
                          {{form.stepName}}
                        </el-descriptions-item>
                        <el-descriptions-item label="负责人">
                          {{form.flowUidName}}
                        </el-descriptions-item>
                        <el-descriptions-item label="成员">
                          {{form.flowIds}}
                        </el-descriptions-item>
                        <el-descriptions-item label="周期">
                          {{form.startTime}}至{{form.endTime}}
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <el-card style="width: 100%;border: none" shadow="never">
                        <template #header>
                          <div class="card-header">
                            <span>流转日志</span>
                          </div>
                        </template>
                        <el-timeline style="max-height: 250px;overflow-y: auto">
                          <el-timeline-item
                              v-for="(activity, index) in activities"
                              :key="index"
                              :timestamp="activity.timestamp" placement="top"
                          >
                            <el-card style="margin-right: 20px" shadow="never">
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/12 20:46</p>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                      </el-card>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="项目附件" name="projectFile">
                  <Fileinfo ref="fileRef" :projectInfo="state.projectInfo"/>
              </el-tab-pane>
              <el-tab-pane label="关联链接" name="projectUrl">
                <Urlinfo ref="urlRef" :projectInfo="state.projectInfo"/>
              </el-tab-pane>
              <el-tab-pane label="项目概况" name="projectStatistics">
                <StatisticsInfo ref="statisticsRef"/>
              </el-tab-pane>
            </el-tabs>
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="项目任务" name="taskInfo">
          <ProjectTask ref="projectTaskRef" :project=" state.projectInfo"/>
        </el-tab-pane>
        <el-tab-pane label="项目文档" name="docInfo">
          <ProjectDoc ref="projectDocRef" :project=" state.projectInfo"/>
        </el-tab-pane>
        <el-tab-pane label="工作记录" name="workInfo">
          <ProjectSchedule ref="projectScheduleRef" :project=" state.projectInfo"/>
        </el-tab-pane>
        <el-tab-pane label="项目评论" name="commentInfo">
          <ProjectComment ref="projectCommentRef" :project=" state.projectInfo"/>
        </el-tab-pane>
        <el-tab-pane label="项目人员" name="projectUser">
          <ProjectUser ref="projectUserRef" :project=" state.projectInfo"/>
        </el-tab-pane>
        <el-tab-pane label="项目动态" name="loginfo">
          <ProjectLog ref="projectLogRef" :project=" state.projectInfo"/>
        </el-tab-pane>
      </el-tabs>

<!--      <template #footer>-->
<!--        <div style="flex:content;margin-right: 20px;">-->
<!--          <el-button type="info" @click="cancelClick">关闭</el-button>-->
<!--        </div>-->
<!--      </template>-->

    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, nextTick, reactive, ref, toRefs,onMounted} from "vue";
  import { ElForm} from "element-plus";
  import type { TabsInstance,TabsPaneContext } from 'element-plus'
  import {ProjectForm, ProjectVO} from "@/leadmall/api/project/types";
  import {useUser} from "@/api/system/user";
  import {getProductlist} from "@/leadmall/api/product";
  import {getProject} from "@/leadmall/api/project";
  import {getWorkList} from "@/leadmall/api/workCate";
  import {FileInterfixVO} from "@/leadmall/api/fileInterfix/types";

  const Fileinfo = defineAsyncComponent(() => import("@/leadmall/views/fileInterfix/index.vue"));
  const Urlinfo = defineAsyncComponent(() => import("@/leadmall/views/linkInterfix/index.vue"));
  const StatisticsInfo = defineAsyncComponent(() => import("./statistics.vue"));
  const ProjectUser = defineAsyncComponent(() => import("@/leadmall/views/projectUser/index.vue"));
  const ProjectLog = defineAsyncComponent(() => import("./log/index.vue"));
  const ProjectTask = defineAsyncComponent(() => import("@/leadmall/views/task/index.vue"));
  const ProjectDoc = defineAsyncComponent(() => import("@/leadmall/views/document/index.vue"));
  const ProjectSchedule = defineAsyncComponent(() => import("@/leadmall/views/schedule/index.vue"));
  const ProjectComment = defineAsyncComponent(() => import("@/leadmall/views/comment/index.vue"));

  const emit = defineEmits(["refresh"])
  const activeName = ref('projectInfo')
  const activeInfo = ref('projectStep')
  const fileRef = ref();
  const urlRef = ref();
  const projectUserRef = ref();
  const projectLogRef = ref();
  const statisticsRef = ref();
  const projectTaskRef = ref();
  const projectDocRef = ref();
  const projectScheduleRef = ref();
  const projectCommentRef = ref();
  const tabPosition = ref<TabsInstance['tabPosition']>('left')

  const projectFormRef = ref(ElForm as any);
  const state = reactive({
    form: {} as any,
    rules:{},
    buttonLoading:false,
    detail:{
      visible: false,
      title: ''
    },
    userList:[],
    productList:[],
    stepList:[],
    projectInfo:{} as FileInterfixVO,
  });
  const {form} = toRefs(state);
  /** 表单重置 */
  const reset = () => {
    form.value = Object.assign({},initFormData);
    projectFormRef.value = {};
    activeName.value = 'projectInfo'
    activeInfo.value = 'projectStep'
  }
  const activities = [
    {
      content: 'Event start',
      timestamp: '2018-04-15',
    },
    {
      content: 'Approved',
      timestamp: '2018-04-13',
    },
    {
      content: 'Success',
      timestamp: '2018-04-11',
    },
  ]
  const handleClick =(tab: TabsPaneContext)=> {
    if("projectFile" == tab.paneName as string){
      fileRef.value.openDetail(form.value);
    }
  }
  const handleProjectClick=(tab: TabsPaneContext)=> {

    if("projectFile" == tab.paneName as string){
      fileRef.value.openDetail(form.value);
    }
    if("projectUrl" == tab.paneName as string){
      urlRef.value.openDetail(form.value);
    }
    if("projectStatistics" == tab.paneName as string){
      statisticsRef.value.openDetail(form.value);
    }
    if("projectUser" == tab.paneName as string){
      projectUserRef.value.openDetail(form.value);
    }
    if("projectUrl" == tab.paneName as string){
      urlRef.value.openDetail(form.value);
    }
    if("loginfo" == tab.paneName as string){
      projectLogRef.value.openDetail(form.value);
    }
    if("taskInfo"==tab.paneName as string){
      projectTaskRef.value.openDetail(form.value);
    }
    if("docInfo"==tab.paneName as string){
      projectDocRef.value.openDetail(form.value);
    }
    if("workInfo"==tab.paneName as string){
      projectScheduleRef.value.openDetail(form.value);
    }
    if("commentInfo"==tab.paneName as string){
      projectCommentRef.value.openDetail(form.value);
    }
  }

  function cancelClick() {
    state.detail.visible = false;
    emit("refresh")
  }
  const openDetail = async ( row: ProjectVO) => {
    initDialog(row);
    state.projectInfo.module = "project";
    state.projectInfo.topicId = row.id;
    state.detail.visible = true;
  };

  const initDialog = (row?: ProjectVO) => {
    useUser().getUserList({}).then((res: any) => {
      state.userList = res.data;
    });
    getProductlist({}).then((res:any)=>{
      state.productList = res.data;
    })
    nextTick(async () => {
      reset();
      const _id = row?.id as unknown as number;
      const res = await getProject(_id);
      Object.assign(form.value, res.data);
      state.detail.title = form.value.name;
      handelProduct();
      if(form.value.startTime){
        form.value.projectDate = [];
        form.value.projectDate.push (form.value.startTime);
        form.value.projectDate.push (form.value.endTime);
      }
      form.value. checkAdminIds = [];
      if(form.value.projectUserList){
        form.value. checkAdminIds = [];
        form.value.projectUserList.forEach((item)=>{
          form.value. checkAdminIds.push(item.uid);
        })
      }
      if(form.value.manageStepList){
        form.value.manageStepList.forEach((item)=>{
          if(item.startTime){
            item.projectDate = [];
            item.projectDate.push (item.startTime);
            item.projectDate.push (item.endTime);
          }
          if(item.flowIds){
            item.checkAdminIds = [];
            item.checkAdminIds = item.flowIds.split(",");
          }
        })
      }

      window.addEventListener('resize', () => {
        // getInputWidth();
      });

    });
  };
  defineExpose({
    openDetail,
    initDialog
  });
  const handelProduct=()=>{
    let workType = state.productList.forEach((item : any) => {
      if(form.value.productId == item.id){
        return item.workType;
      }
    });
    getWorkList({workType}).then((res : any)=>{
      state.stepList = res.data;
      if(!form.value.manageStepList||form.value.manageStepList==undefined||form.value.manageStepList.length==0){
        form.value.manageStepList = [];
        state.stepList.forEach((item:any)=>{
          form.value.manageStepList.push({"flowName":item.id});
        })
      }

    });
  }

  const initFormData: ProjectForm = {
    id: undefined,
    name: undefined,
    productId: undefined,
    adminId: undefined,
    directorUid: undefined,
    startTime: undefined,
    endTime: undefined,
    status: "0",
    stepSort: undefined,
    content: undefined,
    mdContent: undefined,
    deleteTime: undefined,
    checkAdminIds:undefined,
    projectDate:undefined,
    projectUserList:undefined,
    manageStepList:undefined,
  }

onMounted(() => {
  nextTick(() => {
    // 确保父组件布局完成后，调用子组件的 initChart 方法
    statisticsRef.value?.initDate();
  });
});

</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  margin: 10px 20px;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.detail {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

</style>